<template>
  <base-modal
    class="bm-modal"
    width="840px"
    :title="displayTitle"
    :show.sync="show"
    @closed="$emit('destroy')"
    @cancel="$emit('cancel')"
  >
    <bbx-power-map 
      style="height:500px;"
      v-if="currentMapType"
      ref="baseMapContainer" 
      :current-map-type="currentMapType"
    />
  </base-modal>
</template>

<script>
import { t } from '@src/locales';

import platform from '@src/platform';

import { useMapType } from '@src/util/map';

import { MapTypeEnum, MapTypeParams } from '@model/enum/MapEnum'

import { fmt_address } from '@src/filter/fmt';

// 地址组件-解析地址经纬度，目前系统使用了三种地图，坐标系不一样，导致使用不同地图会有偏差，接口做了转换
// https://publink.yuque.com/staff-ubm6dv/sufqv3/lqmgew5t72yb3nai
import { getLngLat, gcj02ToBd09 } from '@src/api/Address';




export default {
  /* 高德/百度/谷歌地图 */
  // 非国际化租户使用高德地图，国际化租户在国内使用百度地图，国际化租户在国外使用谷歌地图
  name: 'base-map-display',

  data(){
    return {
      lngLat: {},
      show: false,
      center:{
        longitude: 116.397428, 
        latitude : 39.90923
      },
      currentMapType:null
    }
  },

  props: {
    title: {
      type: String,
      default: t('common.base.locationMap.info')
    },
    address: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    markerDom: {
      type: String,
      default: ''
    },
    infoDom: {
      type: String,
      default: ''
    },
    customRenderList: {
      type: [Array],
      default: () => ([]),
    }
  },

  computed: {
    displayTitle(){
      return this.options.title || t('common.base.locationMap.customerAddress')
    }
  },

  async mounted(){
    const { currentMapType } = await useMapType();
    this.currentMapType = currentMapType()
    let list = [];

    // 是否是自定义marker标记
    if(this.customRenderList.length){
      const markerList = await this.initCustom();

      list = this.customizeMarker(markerList)
    }else{
      await this.initDefault();

      list = this.defaultMarker();
    }

    if(!this.show) return;

    // 设置marker
    this.$refs.baseMapContainer.setListMark(list);
    
  },

  methods: {
    // 默认预览，通过地址转换为经纬度，标记到地图上
    async initDefault(){
      const { longitude, latitude } = await this.getPointData();
      // 取不到数据
      if( !longitude ) return;

      let points = await this.lngLatSwitch([{longitude, latitude}])
      if(points.length){
        this.center = { latitude:points[0].latitude, longitude:points[0].longitude }
        // 展示弹框
        this.show = true;
      }else{
        this.failed()
      }
    },

    // 自定义预览，通过传入的经纬度列表，标记到地图上
    async initCustom(){

      // 提取经纬度
      const bD09LngLatList = this.getLngLatList();

      // 当打开百度地图时，需要将火星坐标系转为百度坐标系，解决位置偏差问题
      let markerList = await this.lngLatSwitch(bD09LngLatList)

      // 展示弹框
      this.show = true;

      // 转成组件需要的格式
      return markerList;
    },

    // 将经纬度从数组对象里面提取出来
    getLngLatList(){
      const bD09LngLatList = this.customRenderList.map(item => {
        const { adLatitude, latitude, lat, adLongitude, longitude, lng } = item || {};

        return {
          latitude: adLatitude || latitude || lat,
          longitude: adLongitude || longitude || lng
        }
      });

      return bD09LngLatList;
    },

    // 当打开百度地图时，需要将火星坐标系转为百度坐标系，解决位置偏差问题
    async lngLatSwitch(lngLatList = []){
      if(this.currentMapType !== MapTypeEnum.BMap ){
        return lngLatList;
      }
      const { status, data } = await gcj02ToBd09(lngLatList);
      return data || lngLatList;
    },

    // 默认maiker
    defaultMarker(){
      const { latitude, longitude } = this.center;
      return [{
        lat:latitude,
        lng:longitude,
        markInfo:this.markerDom || '<i class="bm-location-dot"></i>',
        infoWindow: this.infoDom,
        showInfoWindowType:'mouseover',
        markClickFn: () => {
          this.jumpToAmap(latitude, longitude)
        }
      }]
    },

    // 将自定义的marker转成组件需要的格式
    customizeMarker(list){
      
      let markers = []
      this.customRenderList?.map((item, index) => {

        const { markerDom, infoDom } = item;
        const { latitude, longitude } = list[index] || {}
        markers.push({
          lat:latitude,
          lng:longitude,
          markInfo: markerDom || this.markerDom || '<i class="bm-location-dot"></i>',
          infoWindow: infoDom || this.infoDom,
          showInfoWindowType: 'mouseover',
          markClickFn: () => {
            this.jumpToAmap(latitude, longitude)
          },
          markKey:index
        })
      })
      return markers;
    },

    getParams(){
      return {
        mapType: MapTypeParams[this.currentMapType],
        address: fmt_address(this.address,'')
      }
    },
    getLatitudeAndLongitude(){
      const latitude = this.address.adLatitude || this.address.latitude || this.address.lat;
      const longitude = this.address.adLongitude || this.address.longitude || this.address.lng;
      return { 
        latitude, 
        longitude 
      }
    },
    // 通过地址转成经纬度
    async getPointData () {
      // 优先使用传入的 address 里面的经纬度
      const { latitude, longitude } = this.getLatitudeAndLongitude();
      if (latitude && longitude) {
        return {
          latitude,
          longitude
        }
      }
      
      const params = this.getParams();
      const { status, data, message } = await getLngLat(params);

      if( status === 0 ){
        return {
          // longitude:116.397428, 
          // latitude:39.90923,
          longitude: data.longitude || 0,
          latitude: data.latitude || 0
        }
      }

      this.failed(message);

      return {}
    },

    failed (error) {
      return this.$platform.notification({
        title: t('common.base.fail'),
        message: error || t('common.base.locationMap.resolveAddressFail'),
        type: 'error',
      });
    },


    jumpToAmap(latitude, longitude){
      
      const urlMap = {
        // position 表示经纬度，name 表示目标位置名称
        [MapTypeEnum.AMap]: `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${this.displayTitle};`,
        // location 表示经纬度，title 表示目标位置名称，content 表示目标位置描述
        [MapTypeEnum.BMap]: `https://api.map.baidu.com/marker?location=${latitude},${longitude}&title=目标位置&content=${this.address.adAddress || this.address.address}&output=html`,
        // 16z 表示地图缩放级别
        [MapTypeEnum.GMap]: `https://www.google.com/maps/@${latitude},${longitude},16z`
      }
      
      const url = urlMap[this.currentMapType];
      
      platform.openLink(url);
      
    },
  }
}
</script>
  
<style lang="scss">
@import '@src/assets/scss/map.scss';
.bm-modal{
  .base-modal-header h3{
    font-weight: 500;
  }
  
  .bm-display-map{
    height: 500px;
  }
}
</style>